<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form id="user_form"></form>
    <script src="node_modules/art-template/lib/template-web.js"></script>
    <script src="node_modules/jquery/dist/jquery.js"></script>

    <script type="text/html" id="test">
        <div>
          <label for="">用户名</label>
          <input type="text" value="{{ user.username }}">
        </div>
        <div>
          <label for="">年龄</label>
          <input type="text" value="{{ user.age }}">
        </div>
        <div>
          <label for="">职业</label>
          <select name="" id="">
            {{ each jobs }} {{ if user.job === $value.id }}
            <option value="{{ $value.id }}" selected>{{ $value.name }}</option>
            {{ else }}
            <option value="{{ $value.id }}">{{ $value.name }}</option>
            {{ /if }} {{ /each }}
          </select>
        </div>
      </script>
    
    <script>
        var data = {}

        // get('http://localhost:3000/users/3')
        //     .then((user) => {
        //         data.user = user
        //         return get('http://localhost:3000/jobs')
        //     })
        //     .then((jobs) => {
        //         data.jobs = jobs
        //         var str = template('test', data)
        //         console.log(data)
        //         document.getElementById('user_form').innerHTML = str
        //     })


        get('http://localhost:3000/users/3', (data) => {
            console.log(data, 55)
        })
        

        function get(url, callback) {
            return new Promise((resolve, reject) => {
                var oReq = new XMLHttpRequest()
                oReq.onload = () => {
                    callback && callback(JSON.parse(oReq.responseText))
                    resolve(JSON.parse(oReq.responseText))
                }
                oReq.onerror = (err) => {
                    reject(err)
                }
                oReq.open('get', url, true)
                oReq.send()
            })
        }
    </script>
</body>

</html>